<!DOCTYPE html>
<html lang="ZH-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>后台登录</title>
  <link rel="stylesheet" href="__ADMIN_PUBLIC__/layui/css/layui.css">
  <link rel="stylesheet" href="__ADMIN_PUBLIC__/style/login.css">
</head>

<body>
  <div class="kit-login">
    <div class="kit-login-bg"></div>
    <div class="kit-login-wapper">
      <h2 class="kit-login-slogan">欢迎使用 <br> KITADMIN 后台模板后台模板</h2>
      <div class="kit-login-form">
        <h4 class="kit-login-title">登录</h4>
        <form class="layui-form">
          <div class="kit-login-row">
            <div class="kit-login-col">
              <i class="layui-icon">&#xe612;</i>
              <span class="kit-login-input">
                <input type="text" name="mobile" lay-verify="phone|mobile" maxlength="11" placeholder="手机号" />
              </span>
            </div>
            <div class="kit-login-col"></div>
          </div>
          <div class="kit-login-row">
            <div class="kit-login-col">
              <i class="layui-icon">&#xe673;</i>
              <span class="kit-login-input">
                <input type="password" name="password" lay-verify="pass" placeholder="密码" />
              </span>
            </div>
            <div class="kit-login-col"></div>
          </div>
          <div class="kit-login-row">
            <div class="kit-login-col">
              <i class="layui-icon">&#xe672;</i>
              <span class="kit-login-input" style="width: 135px">
                <input type="text" name="viewCode" lay-verify="viewCode" placeholder="验证码" />
              </span>
              <img src="{:url('/login/verify')}" alt="captcha" id="LAY-get-viewCode" style="padding-bottom: 10px;"/>
            </div>
            <div class="kit-login-col"></div>
          </div>
          <div class="kit-login-row">
            <button class="layui-btn kit-login-btn" lay-submit="submit" lay-filter="LAY-user-login-submit">登录</button>
          </div>
          <div class="kit-login-row" style="margin-bottom:0;line-height: 20px;">
            <!--<a href="javascript:;" style="color: rgb(153, 153, 153); text-decoration: none; font-size: 13px;width: 100px;float: left;" id="forgot">忘记密码</a>-->
            <!--<a href="javascript:;" style="color: rgb(153, 153, 153); text-decoration: none; font-size: 13px;width: 80px;float: right;" id="regs">注册</a>-->
          </div>
        </form>
      </div>
    </div>
  </div>
  <script src="__ADMIN_PUBLIC__/layui/layui.js"></script>
  <script>
      layui.config({
          base: '__ADMIN_PUBLIC__/' //静态资源所在路径
      }).extend({
          index: 'lib/index' //主入口模块
      }).use(['index','form'], function(){
          var $ = layui.$
            ,setter = layui.setter
            ,admin = layui.admin
            ,form = layui.form
            ,router = layui.router()
            ,search = router.search;

          // 更新图形验证码
          $('#LAY-get-viewCode').on('click',function (obj) {
              this.src = "{:url('/login/verify')}?" + new Date().getTime();
              return false;
          });

          // 自定义验证规则
          form.verify({
              mobile:function (value) {
                  if(!value){return '手机号不能为空';}
              },
              pass:function (value) {
                if(!value){return '密码不能为空';}
                if(!/^[\S]{6,12}$/.test(value)){return '密码必须6到12位，且不能出现空格';}
              },
              viewCode:function (value) {
                  if(!value){return '验证码不能为空';}
              }
          });

          //提交登录
          form.on('submit(LAY-user-login-submit)', function(obj){
              console.log(obj);
              var mobile = obj.field.mobile;
              var password = obj.field.password;
              var viewCode = obj.field.viewCode;
              $.ajax({
                  url: "/login/check"
                  ,type: 'post'
                  ,dataType: 'json'
                  ,data: {mobile:mobile,password:password,viewCode:viewCode}
                  ,success:function (response) {
                      if(response.code == 200){
                          layer.msg(response.msg,{icon:6,time:2000},function () {
                              window.location = "{:url('/admin')}";
                          });
                      }else{
                          layer.msg(response.msg,{icon:5,anim: 6});
                      }
                      return false;
                  }
              });
              return false;
          });

      });
  </script>
</body>
</html>